<template>
	<view class="tooltip-container">
		<!-- 触发元素 -->
		<view class="trigger-wrapper" @click.stop="openTooltip">
			<slot name="trigger"></slot>
		</view>

		<!-- Tooltip 内容 -->
		<view v-if="showTooltip" class="tooltip" :class="[
        `tooltip-${position}`,
        {'tooltip-show': showTooltip}
      ]" :style="{
        maxWidth: maxWidth + 'rpx',
        backgroundColor: backgroundColor,
        color: textColor
      }">
			<slot name="content"></slot>
			<view class="tooltip-arrow" :class="`arrow-${position}`" :style="{ borderTopColor: backgroundColor }"></view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		onUnmounted,
		getCurrentInstance
	} from 'vue';

	const props = defineProps({
		position: {
			type: String,
			default: 'top',
			validator: (value) => ['top', 'bottom', 'left', 'right'].includes(value)
		},
		delay: {
			type: Number,
			default: 100
		},
		maxWidth: {
			type: Number,
			default: 400
		},
		backgroundColor: {
			type: String,
			default: 'rgba(0, 0, 0, 0.8)'
		},
		textColor: {
			type: String,
			default: 'white'
		}
	});

	const showTooltip = ref(false);



	const openTooltip = () => {
		showTooltip.value = true;
	}

	const closeTooltip = () => {
		showTooltip.value = false;
	}

	defineExpose({
		openTooltip,
		closeTooltip
	})
</script>

<style scoped>
	/* 容器样式 */
	.tooltip-container {
		position: relative;
		display: inline-flex;
		align-items: center;
	}

	/* 工具提示主体 */
	.tooltip {
		position: absolute;
		background: v-bind('props.backgroundColor');
		color: v-bind('props.textColor');
		padding: 24rpx 32rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		font-weight: 500;
		line-height: 1.4;
		box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.15);
		opacity: 0;
		transition: all 0.25s cubic-bezier(0.68, -0.55, 0.27, 1.55);
		z-index: 100;
		min-width: 240rpx;
		max-width: v-bind('props.maxWidth + "rpx"');
		text-align: center;
		pointer-events: none;
	}

	/* 不同位置样式 */
	.tooltip-top {
		bottom: calc(100% + 10rpx);
		left: 50%;
		transform: translateX(-50%) scale(0.95);
	}

	.tooltip-bottom {
		top: calc(100% + 10rpx);
		left: 50%;
		transform: translateX(-50%) scale(0.95);
	}

	.tooltip-left {
		right: calc(100% + 10rpx);
		top: 50%;
		transform: translateY(-50%) scale(0.95);
	}

	.tooltip-right {
		left: calc(100% + 10rpx);
		top: 50%;
		transform: translateY(-50%) scale(0.95);
	}

	.tooltip-show {
		opacity: 1;
		transform: translateX(-50%) scale(1);
	}

	.tooltip-left.tooltip-show,
	.tooltip-right.tooltip-show {
		transform: translateY(-50%) scale(1);
	}

	/* 工具提示箭头 */
	.tooltip-arrow {
		position: absolute;
		width: 0;
		height: 0;
		border-style: solid;
	}

	.arrow-top {
		top: 100%;
		left: 50%;
		transform: translateX(-50%);
		border-width: 12rpx 12rpx 0 12rpx;
		border-color: v-bind('props.backgroundColor') transparent transparent transparent;
	}

	.arrow-bottom {
		bottom: 100%;
		left: 50%;
		transform: translateX(-50%);
		border-width: 0 12rpx 12rpx 12rpx;
		border-color: transparent transparent v-bind('props.backgroundColor') transparent;
	}

	.arrow-left {
		left: 100%;
		top: 50%;
		transform: translateY(-50%);
		border-width: 12rpx 0 12rpx 12rpx;
		border-color: transparent transparent transparent v-bind('props.backgroundColor');
	}

	.arrow-right {
		right: 100%;
		top: 50%;
		transform: translateY(-50%);
		border-width: 12rpx 12rpx 12rpx 0;
		border-color: transparent v-bind('props.backgroundColor') transparent transparent;
	}

	/* 触发图片基础样式（可在使用处覆盖） */
	.tooltip-img {
		width: 44rpx;
		height: 44rpx;
		transition: transform 0.2s;
	}

	.trigger-wrapper:active .tooltip-img {
		transform: scale(0.95);
	}
</style>